<template>
  <view class="focus">
    <view class="focus-t">今日聚焦</view>
    <view class="f-content">
      <view class="focus-g">
        <view class="focus-g-image"><image src ='https://img.k12zx.com/picture/5c7e094e246ad9490.jpg'></image></view>
        <view class="focus-g-left-box">
          <navigator url="/pages/f-content/index"> <view class="focus-g-content-title">重磅！河北衡水学谷教育集团与明德国际教育集团战略携手，打造入读衡水名校咨询平台</view></navigator>
          <view class="focus-g-content-title2">2022年5月20日，河北衡水学谷教育集团与明德国际教育集团强强联手，签订战略协议，以衡水 “精细操作，勤学苦修，尊师重道，胸怀天下” 的教育文化底蕴为依托，共同打造京籍及非京籍应往届初中毕业生、应往届艺体能特长生、高考补习生如何选择衡水名校入读的教育咨询择校平台。</view>
        </view>
      </view>
      <view
        @tap="quest"
        class="focus-content"
        v-for="item in content"
        :key="item.id"
        >{{ item.title }}</view
      >
    </view>
    <navigator url="/pages/moreGuides/index">
    <view class="focus-more"> 更多资讯 </view>
    </navigator>
  </view>
</template>

<script>
import Taro from "@tarojs/taro";
export default {
  data() {
    return {
         content: [
        {
          id: 1,
          title:
            "这是测试文字测试文字用于展示和点击这是测试文字测试文字用于展示和点击这是测试文字测试文字用于展示和点击",
        },
        {
          id: 2,
          title:
            "这是测试文字测试文字用于展示和点击这是测试文字测试文字用于展示和点击这是测试文字测试文字用于展示和点击",
        },
        {
          id: 3,
          title:
            "这是测试文字测试文字用于展示和点击这是测试文字测试文字用于展示和点击这是测试文字测试文字用于展示和点击",
        },
        {
          id: 4,
          title:
            "这是测试文字测试文字用于展示和点击这是测试文字测试文字用于展示和点击这是测试文字测试文字用于展示和点击",
        },
        {
          id: 5,
          title:
            "这是测试文字测试文字用于展示和点击这是测试文字测试文字用于展示和点击这是测试文字测试文字用于展示和点击",
        },
      ],
    };
  },
  methods: {
    quest() {
      Taro.navigateTo({
        url: "/pages/f-content/index",
      });
    },
  },
};
</script>

<style>
.focus {
  width: 100%;
  margin-top: 20px;
  background-color: white;
  overflow: hidden;
}

.focus-t {
  margin-top: 4%;
  margin-left: 4%;
  width: 25%;
  font-size: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-left: 7px solid #0b6db6;
}

.f-content {
  margin-top: 4%;
  margin-left: 4%;
  margin-right: 4%;
}

.focus-more {
  width: 92%;
  height: 70px;
  margin:20px auto;
  margin-bottom: 30px;
  background-color: #0b6db6;
  text-align: center;
  line-height: 70px;
  color: white;
}

.focus-content {
  border-bottom: 1px dashed #ccc;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 20px 0px;
  font-size: 25px;
}

.focus-g {
  display: flex;
  width: 100%;
  height: 200px;
  margin-top: 10px;
  padding-bottom: 20px;

  border-bottom: 1px dashed #ccc;
}
.focus-g-left-box{
  width: 72%;
  height: 100%;
  margin-left: auto;
  overflow: hidden;

}
.focus-g-image{
  width: 180px;
  height: 130px;
  background-color: aquamarine;
}
.focus-g-content-title{
  overflow: hidden;
      white-space: nowrap;
    text-overflow: ellipsis;
}
.focus-g-content-title2{
  line-height: 40px;
  margin-top: 15px;
    color: #999;
    font-size: 27px;
}
.r-p {
  flex: 1;
  margin-left: 2%;
  /* background-color: brown; */
  
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.r-inside {
  padding-top: 20px;
  font-size: 27px;
}
</style>
